<template>
    <div>
        <el-form ref="adminForm" :model="user" label-width="80px">
            <el-form-item label="用户账号:">
                <el-input v-model="user.loginCode" placeholder="请输入账号" clearable></el-input>
            </el-form-item>
            <el-form-item label="用户密码:">
                <el-input v-model="user.password" placeholder="请输入密码" show-password></el-input>
            </el-form-item>
            <el-button type="primary" @click="adminSubmit" class="admin-submit">立即登陆</el-button>
        </el-form>

        <login-yzm v-if="isShowYzm" @yzmClose="yzmClose"/>
    </div>
</template>

<script>
    import paramApi from '@/api/param/paramApi'
    import loginApi from '@/api/login/loginApi'
    import loginYzm from "./LoginYzm";
    import  "@/js/desUtils"

export default {
        name: "LoginBox",
        components:{
            loginYzm
        },
        data() {
            return {
                isShowYzm:false,
                user: {
                    loginCode: '',
                    password: '',
                }
            }
        },
        methods: {
             async adminSubmit() {
                if (this.user.loginCode.trim() == ''){
                    this.$message.warning("请输入用户名")
                }else if(this.user.password.trim() == ''){
                    this.$message.warning("请输入密码")
                }else {
                    let res =await paramApi.getByKey("loginVerification")
                    if (res.code == '200'){
                        if (res.data.paramValue == '1'){
                            this.isShowYzm = true
                        }
                        if (res.data.paramValue == '2'){
                            this.login();
                        }
                    }

                }

            },
            async yzmClose(flag){
                this.isShowYzm = false
                if (flag){
                    this.login()
                }else {
                    this.$message.warning("验证失败请重试")
                }
            },
            async login(){
                const loading = this.$loading({
                    lock: true,
                    text: '正在登陆',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                let res = await paramApi.getByKey("loginSecretKey")
                let paramValue = res.data.paramValue
                if (res.code == '200'){
                    // 用户名和密码加密
                    let loginCode = DesUtils.strEnc(this.user.loginCode,paramValue)
                    let password = DesUtils.strEnc(this.user.password,paramValue);
                    const res2 = await loginApi.login(loginCode,password);
                    if (res2.code == '200'){
                        localStorage.setItem("cmsToken",res2.data.sessionId)  //会话id
                        localStorage.setItem("cmsUser",JSON.stringify(res2.data.sysUser))  //用户信息
                        localStorage.setItem("cmsMenu",JSON.stringify(res2.data.menuRole))  //用户拥有的菜单
                        localStorage.setItem("cmsRole",res2.data.sysRole)  //权限信息
                        await this.$store.dispatch("SetCmsUser")
                        await this.$store.dispatch("SetCmsMenu")
                        await this.$store.dispatch("SetCmsRole")
                        //await this.$store.dispatch("SetCmsRouter")

                        this.$router.push("/index")
                    }else {
                        this.$message.error(res2.msg)
                    }
                    loading.close();
                }else {
                    this.$message.error(res.msg)
                }
            }
        },
        computed: {

        }
    }
</script>

<style>


    .admin-submit {
        width: 420px;
        float: left;
        margin-left: 80px;
    }


    .el-message.is-closable .el-message__content {
        padding-right: 130px;
    }

</style>